<template>
    <div class="container-box">        
        <!-- <div>{{$filters.formatDate('时间')}}</div> -->
        <div>shallowRef的{{loginInfoShallowRef.name}}</div>
        <div>ref的{{loginInfo.name}}</div>
        <el-button type="primary" @click="change">{{ $translate('btnDesc.change') }}</el-button>
        <div class="tab">
            <el-button v-for="(item, index) in data" :key="item.name"  
            @click="changeTab(item, index)"
            :type="index === activeIndex? 'primary':'default'">
                {{ item.name }}
            </el-button>
        </div>
        <div class="com-box">
            <component :is="activeCom">
                <template #content>
                    <div>插槽内容</div>
                </template>
            </component>
        </div>
        
        <div class="slot-box">
            <div>插槽父子组件见的信息交互</div>
            <div>
                <comB v-slot="slotProps">
                    {{ slotProps.desc }}
                    {{ slotProps.target }}
                </comB>
            </div>
        </div>
        <div class="slot-box">
            <div>插槽父子组件见的信息交互</div>
            <div>
                <comC>
                    <template #content="contentxProps">
                       插槽子组件传递来的信息： {{ contentxProps }}
                    </template>
                </comC>
            </div>
        </div>
        
        <div>{{ objectRef.count }}</div>     
        <div>{{ count }}</div>
        
        <div>
            <div v-for="item in forList" ref="itemRefs" :key="item.id">
                {{ item.name }}
            </div>
        </div>    
    </div>
    
</template>
<script setup lang='ts'>
    
    import {markRaw, onMounted, reactive, ref, shallowRef, triggerRef, unref, provide} from 'vue'
    //component 动态路由相关    
    import comA from './com/comA.vue'
    import comB from './com/comB.vue'
    import comC from './com/comC.vue'

    let arr:Array<string> = ['kino', 'thc']
    
    let name = ref(arr?.[1])    
    let loginInfo = ref({
        name: 'thc',
        password: '123456'
    })
    // console.log('loginInfo',loginInfo.password )   //只能通过loginInfo.value.password获取值
    const unrefLoginInfo = unref({
        name: 'thc',
        password: '123456'
    })
    console.log('unrefLoginInfo', unrefLoginInfo)
    
    const loginInfoShallowRef = shallowRef({
        name: 'thc'
    })

    const change = ()=>{
        // loginInfo.value.name = 'kino'
        loginInfoShallowRef.value.name = '你好'
        triggerRef(loginInfoShallowRef)
        console.log('loginInfoShallowRef')
        objectRef.count.value += 1
    }


    //component 动态路由相关   
    const activeCom = shallowRef(comA) 
    const activeIndex = ref<number>(0)
    interface comInfo{
        name: string,
        com: any
    }
    const data = reactive<comInfo[]>(
        [
            {
                name: 'A组件',
                com: markRaw(comA)
            },
            {
                name: 'B组件',
                com: markRaw(comB)
            },
            {
                name: 'C组件',
                com: markRaw(comC)
            },
        ]
    )
    const changeTab = (item: comInfo, index:number):void => {
        activeCom.value = item.com
        activeIndex.value = index
    }    

    // const reative_ = (obj:object)=>{
    //     return new Proxy(obj,{
    //         get(target,key){
    //             track(target, key)
    //             return target[ket]
    //         },
    //         set(target, key, value){
    //             target[key] = value
    //             trigger(target,key)
    //         }
    //     })
    // }
    
    // const objectRef = ref({count: 0})
    // objectRef.value = {count:1}

    const objectRef = {count: ref(99)}
    objectRef.count.value = 100
    const {count} = objectRef

    const forList =  ref([
        {
            id: '1',
            name: 'thc'
        },
        {
            id: '2',
            name: 'mimo'
        }
    ])
    const itemRefs = ref([])

    onMounted(()=>{
        console.log('itemRefs', itemRefs.value)
    })

    const location = ref('thc')
    const updateLocation = ()=>{
        location.value = 'thc want'
    }

    provide('name', 'KINO')
    provide('location',{
       location,
       updateLocation
    })
     
</script>
<style lang='scss' scoped>
    .container-box{
        padding: 10px;
        .tab{
            margin-top: 10px;
        }
        .com-box{
            border: 1px solid #ccc;
            width: 100%;
            height: 220px;
            padding: 10px;
            margin-top: 10px;
            border-radius: 3px;
        }
    }
    .slot-box{
        width: 100%;
        height: 210px;
        border: 1px solid #ccc;
        border-radius: 3px;
        padding: 10px;
        margin: 10px 0;
    }
</style>